import React, { useRef, useState, useEffect } from 'react';
import './index.less';
import {
  Tree,
  Card,
  Button,
  Input,
  Space,
  Table,
  notification,
  Modal,
} from 'antd';
import { history, request } from 'umi';
export default function Notice_main() {
  const searchInp = useRef();
  const [tableData, setTableData] = useState([]);
  const [selectedRowKeys, setSelectedRowKeys] = useState(''); // 通知分类单选
  const [isone, editone] = useState(false);
  const columnss = [
    {
      title: '',
      dataIndex: 'id',
      width: 10,
      ellipsis: true,
      render: (text, data, index) => {
        // console.log(selectedRowKeys,'key')
        return (
          <div>
            <input
              type="checkbox"
              checked={selectedRowKeys === data._id ? true : false}
              name=""
              id={data._id}
              onChange={(e) => {
                editChk(e, data._id);
              }}
            />
          </div>
        );
      },
    },
    {
      title: '',
      dataIndex: 'id',
      width: 10,
      ellipsis: true,
      align: 'center',
      render: (text, data, index) => index + 1,
    },
    {
      title: '新闻标题',
      dataIndex: 'title',
      width: 200,
      align: 'left',
      ellipsis: true,
    },
    {
      title: '发布时间',
      dataIndex: 'publish',
      width: 40,
      align: 'center',
      ellipsis: true,
    },
    {
      title: '创建人',
      dataIndex: 'createFather',
      width: 20,
      ellipsis: true,
      align: 'center',
      render: (text, data, index) => 'hq',
    },
  ];
  const renderList = () => {
    request('/api/hyq/getJournalism', { method: 'get' }).then((res) => {
      setTableData(res.data);
      // console.log(res.data);
    });
  };
  // 修改单选
  const editChk = (e, id) => {
    if (e.target.checked) {
      setSelectedRowKeys(id);
      // console.log(id,'checked')
    } else if (isone) {
      setSelectedRowKeys(id);
      // console.log(id,'isdone')
    } else {
      setSelectedRowKeys('');
      // console.log('','取消单选')
    }
  };
  useEffect(() => {
    renderList();
  }, []);
  return (
    <div className="Main-Text">
      <div className="Main-Header">
        <div className="MeansRightHeadBtn">
          <Button
            onClick={() => {
              history.push('/notice/notice_main/add_journal');
            }}
          >
            新增
          </Button>
        </div>
        <div className="MeansRightHeadBtn">
          <Button
            onClick={() => {
              // console.log(selectedRowKeys)
              history.push({
                pathname: '/notice/notice_main/edit_main',
                query: {
                  key: selectedRowKeys,
                },
              });
            }}
            disabled={selectedRowKeys !== '' ? false : true}
          >
            修改
          </Button>
        </div>
        <div className="MeansRightHeadBtn">
          <Space wrap>
            <Button type="dashed" onClick={() => {}}>
              删除
            </Button>
          </Space>
        </div>
        <div className="MeansRightHeadInput">
          <Space>
            <span style={{ marginLeft: '35px' }}>名称：</span>
            <Input style={{ backgroundColor: 'white' }} ref={searchInp} />
            <Button
              onClick={() => {
                // console.log(searchInp.current.input.value, 'asdasdasdasddas')
                request(
                  `/api/hyq/getJournalism?pw=${searchInp.current.input.value}`,
                  { method: 'get' },
                ).then((res) => {
                  setTableData(res.data);
                });
              }}
            >
              查询
            </Button>
          </Space>
        </div>
        <div className="MeansRightHeadBtn">
          <Button>查看日志</Button>
        </div>
      </div>
      <div className="Main-Content">
        <Card>
          <Table
            style={{ width: '90%', height: '90vh' }}
            columns={columnss}
            pagination={false}
            bordered
            rowKey="_id"
            onRow={(record, index) => {
              return {
                onClick: (e) => {
                  editChk(e, record._id);
                  editone(!isone);
                },
              };
            }}
            dataSource={tableData}
          />
        </Card>
      </div>
    </div>
  );
}
